<template>
  <div class="basetable" element-loading-text="拼命加载中">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <!-- 点击触发add方法 -->
      <span class="spansearch">姓名</span>
      <el-input
        size="small"
        placeholder="姓名搜索"
        style="width: 350px; margin-left: 16px"
        @input="searchClick"
        clearable
        v-model="input1"
      >
      </el-input>
    </div>
    <div class="tableMain">
      <el-table
        :data="
          userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="100"
          label="序号"
        ></el-table-column>
        <el-table-column prop="avatar" label="头像">
          <template scope="scope">
            <img
              :src="'http://px.0123china.cn' + scope.row.avatar"
              width="80"
              height="80"
            />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>

        <el-table-column prop="nickname" label="姓名"></el-table-column>
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 绑定班级 -->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisibleClass" width="550px">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="form">
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          style="margin-bottom: 20px">
          <el-input v-model="form.nickname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          style="margin-bottom: 20px">
          <el-input v-model="form.username" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="头像" :label-width="formLabelWidth" style="margin-bottom:20px;">
          <el-upload
            class="avatar-uploader"
            action="http://px.0123china.cn/api/v1.upload/up"
            :multiple="false"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="avatarimg" :src="avatarimg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="分配班级" :label-width="formLabelWidth">
          <el-select
            multiple
            v-model="value"
            placeholder="请选择"
            @change="select($event)"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          style="width: 50%;margin-bottom:20px;"
        >
          <el-input
            placeholder="密码为空时默认不修改"
            v-model="passwordInput"
            type="password"
            style="margin-bottom:20px;"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="radio" @change="getRadioVal">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </template>         
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="bindClass">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      userList: [],
      dialogFormVisible: false,
      dialogFormVisibleClass: false,
      formLabelWidth: "80px",
      // 设置form用于进行添加的时候绑定值
      form: {},
      value6: "",
      currentPage3: 1,
      currentIndex: "",
      enterId: "",
      options: [],
      value: "",
      notBind: "",
      input1: "", //搜索
      radio: 0,
      radiocg:'',
      pic:"",
      picc:"",
      avatarimg:"",
      passwordInput:"",
    };
  },
  created() {
    this.lurulists();
    this.tobindclass();
    this.user_show()
  },
  methods: {
    beforeAvatarUpload(file) {
      //上传前的函数
      //上传前对图片类型和大小进行判断
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return  isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.pic = res.pic//上传图片接口
      this.avatarimg = "http://px.0123china.cn"+res.pic
      console.log("res",res);
      console.log("file",file);
      this.picc = URL.createObjectURL(file.raw);
      console.log("this.picc",this.picc);
    },
    getRadioVal(e){
      console.log(e);
      this.radio = e
      this.radiocg = e
    },
    async user_show(){
      let res = await this.$api.home.user_show()
      console.log(res);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    //录入员列表
    async lurulists() {
      let lurulists = (await this.$api.home.enterLists()).data.data;

      this.userList = lurulists;
    },
    //获取未绑定录入员的班级
    async tobindclass() {
      let bindclass = (await this.$api.home.tobindclass()).data.data;
      this.options = bindclass;
    },
    select(e) {
      let a = e.join(",");
      this.notBind = a;
      console.log("this.notBind", this.notBind);
    },
    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      this.form = {
        date: "",
        name: "",
        region: "",
        address: "",
      };
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
    },
    update() {
      this.userList.push(this.form);
      this.dialogFormVisible = false;
    },
    handleEdita(index, row) {
      console.log(index,row);
      this.dialogFormVisible = true;
      this.enterId = row.id;
      // 将数据的index传递过来用于实现数据的回显
      this.form = this.userList[index];
      this.currentIndex = index;
    },
    handleEdit(index, row) {
      console.log(row);
      this.enterId = row.id;
      // 将数据的index传递过来用于实现数据的回显
      // this.form = this.userList[index];
      this.form = row;
      this.currentIndex = index;
      this.avatarimg = 'http://px.0123china.cn'+row.avatar
      this.passwordInput = ''
      this.value = ''
      this.radio = row.status
      // 设置对话框的可见
      this.dialogFormVisibleClass = true;
    },
    async bindClass() {
      let a = this.avatarimg.slice(22)
      let bindClass = (
        await this.$api.home.lly_edit({
          id: this.enterId,
          class_id: this.notBind,
          username: this.form.username,
          nickname: this.form.nickname,
          avatar:a,
          status:this.radio,
          password: this.passwordInput,
          // role:'4'
        })
      ).data;
      if (bindClass.code == 200) {
        this.$notify({
          title: "成功",
          message: bindClass.msg,
          type: "success",
        });
        this.dialogFormVisibleClass = false;
      } else {
        this.$notify.error({
          title: "错误",
          message: bindClass.msg,
        });
      }
    },
    handleDelete(index, row) {
      // 设置类似于console类型的功能
      this.$confirm("永久删除此录入员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
          this.userList.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisibleClass = false;
    },

    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter((e) => {
          return e.username.match(searchText);
        });
        this.userList = list;
      } else {
        this.lurulists();
      }
    },
  },
};
</script>
<style lang="less" scope>
.el-input{
  width: 200px !important;
}
.tableMain {
  margin-top: 10px;
}
//搜索框文字
.spansearch {
  color: #409eff;
  font-size: 15px;
  margin-left: 20px;
}

.page {
  float: left;
  margin-top: 10px;
}

.el-input--suffix {
  .el-input-group__append {
    border-color: #1890ff;
    .btnSearch {
      background: #1890ff;
      color: #fff;
      border-radius: 0;
    }
  }
}
</style>